<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <script src="__STATIC__/js/base.js"></script>
    <title>服务分类</title>
    <link rel="stylesheet" href="__STATIC__/css/base.css">
    <link rel="stylesheet" href="__STATIC__/css/userinfo.css">
    <script src="__STATIC__/js/jquery-1.11.1.min.js"></script>
    <link rel="stylesheet" href="__STATIC__/css/index.css">
</head>
<body class="" style="overflow: hidden;background: #e5e5e5">
<section class="wrap wrap-white">
    <div id="content">
        <ul class="one-cate">
            {volist name="sn" id="v"}
            <li class="one-cate-list" id="{$v.categoryName}">
                <span class="one-cate-title "><label class=""></label>{$v.categoryName}</span>
                <ul class="two-cate display-none" >
                    {foreach $v.er as $v2}
                    <li>
                        <a class="two-cate-title ">{$v2.categoryName}</a>
                        {foreach $v2.san as $v3}
                        <a class="cate-service" href="/goodsDetail?serviceId={$v3.serviceId}">{$v3.serviceName}</a>
                        {/foreach}
                    </li>
                    {/foreach}
                    <!--空li来使二三级分类和底部floor 保留一定间距-->
                    <li style="height: 4.12rem;"></li>
                </ul>
            </li>
            {/volist}
        </ul>
    </div>
    <div class="floor-nav">
        <a href="/index.html">
            <img src="__STATIC__/images/home.png" alt="" id="shouye">
            <span >首页</span>
        </a>
        <a href="/category.html">
            <img src="__STATIC__/images/catergry.png" alt="" id="cate">
            <span>分类</span>
        </a>
        <a href="/lists.html">
            <img src="__STATIC__/images/order.png" alt="" id="order">
            <span>订单</span>
        </a>
        <a href="/info.html">
            <img src="__STATIC__/images/me.png" alt="" id="my">
            <span>我的</span>
        </a>
    </div>
    <!--底部导航结束-->
    <script>
        $(function(){
            var url=window.location.href;
            //从订单确认面过来的则是选择收货地址，跳回订单确认页面
            var  index=new RegExp('index.html');
            var  order = new RegExp('lists.html');
            var  my = new RegExp('info.html');
            var  cate = new RegExp('category.html');
            if(index.test(url)){
                $('#shouye').attr('src','__STATIC__/images/home1.png');
                $('#shouye').parent().children('span').addClass('col-blue');
            };
            if(order.test(url)){
                $('#order').attr('src','__STATIC__/images/order1.png');
                $('#order').parent().children('span').addClass('col-blue');
            };
            if(cate.test(url)){
                $('#cate').attr('src','__STATIC__/images/category1.png');
                $('#cate').parent().children('span').addClass('col-blue');
            };
            if(my.test(url)){
                $('#my').attr('src','__STATIC__/images/me1.png');
                $('#my').parent().children('span').addClass('col-blue');
            };
        });


    </script>
    <div class="padding" style="width: 100%;background:  #f6f4f4;"></div>
</section>
<script>
    $(function(){
        var html = document.querySelector("html");
        var width = html.getBoundingClientRect().width;
        var fontSize = width/16;
        var height = window.innerHeight;
        var floorH = fontSize *2.22666667 ;
        $('.two-cate').height(height-floorH);
//        if(contentH > (height - floorH)){
//            $('.padding').height(floorH);
//        }
        $('.one-cate-title').on('click',function(){
            $('.one-cate-title').removeClass('selected-cate');
            $('.one-cate-title label' ).hide();
            $('.one-cate-list .two-cate').addClass('display-none');
            $(this).parent().children('.two-cate').removeClass('display-none');
            $(this).children('label').show();
            $(this).addClass('selected-cate');
        });
        var cate = getUrlParam('cate');
        if(cate == null){
            $('.one-cate').children('li:nth-child(1)').children('span:nth-child(1)').addClass('selected-cate');
            $('.one-cate').children('li:nth-child(1)').children('.two-cate').removeClass('display-none');
            $('.one-cate').children('li:nth-child(1)').children('span:nth-child(1)').children('label').show()
        }else {
            $('#'+cate).children('span:nth-child(1)').addClass('selected-cate');
            $('#'+cate).children('.two-cate').removeClass('display-none');
            $('#'+cate).children().children('label').show();
        }
    });

</script>
</body>
</html>